<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>key原理</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- 
            语法:v-for = "(item,index) in items" :key='index' 默认会用index为key
            key:最好用item.id(唯一标识) 不然如果对items的顺序进行破坏(如tiems.unshift()),会产生效率低下,
            或用户输入input 可能产生错乱
            vue 会根据key值创建虚拟dom 根据对比算法 对真实dom进行操作.
         -->
         <ul>
            <li v-for="(student) in students" :key="student.id">
                {{student.name}} - {{student.age}}
            </li>
         </ul>
    </div>
    
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //以阻止 vue 在启动时生成生产提示。
    //创建Vue
    const vm = new Vue({
        el:'#root', 
        data:{
            students:[
                {
                    id:1,
                    name:'黎伟华2',
                    age:'18'
                },
                {
                    id:2,
                    name:'黎伟华2',
                    age:'19'
                },
                {
                    id:3,
                    name:'黎伟华3',
                    age:'20'
                },
            ]
        }
    })

</script>
</html>